<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticker :: GestureSlider</title>
<link href="style/common.css" rel="stylesheet"/>
<style>
body
{
	margin:0px;
	padding:0px;
}

#NSViewSliderStage
{
	position: relative;
	display: inline-block;
	overflow:hidden;
	margin:0px;
	padding:0px;
	width: 80%;
	height: 400px;
	border: solid 1px #000;
}
#NSViewSliderStage .board
{
	background-color:#063;
}
#NSViewSliderStage .page
{
	background-color:#39C;
}

#controllBox
{
	text-align:center;
}
.myContent
{
	font-size: 90px;
	font-weight: 600;
}

</style>
<script src="./js/importlibs.js"></script>
<script type="text/javascript">
// [ 응용 샘플 ]
var _nxSlider;

window.onload = function()
{
	// 컨텐츠 리스트 정의
	// Array.<DIV Element>
	var _myContents 	= [];
	var _list			= document.getElementsByClassName( "myContent" );
	for( var i=0; i<_list.length; i++ )
	{
		_myContents.push( _list[i] );
	}
	// 슬라이더 객체 생성
	var _sliderStage						= document.getElementById( "NSViewSliderStage" );
	_nxSlider								= new STGestureSlider( _sliderStage );
	_nxSlider.onTweenComplete 	= onSliderTweenComplete;
	_nxSlider.setSlides( _myContents );
	updatePages();
}

// 버튼 이벤트
function onClickPop( e )
{
	_nxSlider.prev();
}
function onClickPush( e )
{
	_nxSlider.next();
}
function onClickIndex( e )
{
	var _index = parseInt( document.getElementById( "txt_index" ).value );
	_nxSlider.setPageIndex( _index );
}
// [ 트윈 완료 콜백 ]
function onSliderTweenComplete()
{
	//console.log( "onSliderTweenComplete", _nxSlider );
	updatePages();
}
function updatePages()
{
	document.getElementById( "pages" ).innerHTML = _nxSlider.currentPage() + "/" + _nxSlider.totalPages();
}

function sampleClick( e )
{
	alert( "sample Click ! "+ e.type +"/"+ e.currentTarget.value );
}


</script>

</head>

<body>
<h1>Lv2. STGestureSlider</h1>
<br>
<h4>Code Sample</h4>
<pre class="examplefield"><span style="color:#af82d4">// 컨텐츠 리스트 정의</span>
<span style="color:#af82d4">// Array.&lt;DIV Element></span>
<span style="color:#ff5600">var</span> _myContents <span style="color:#069;font-weight:700">=</span> [];
<span style="color:#ff5600">var</span> _list   <span style="color:#069;font-weight:700">=</span> <span style="color:#a535ae">document</span>.getElementsByClassName( <span style="color:#666">"myContent"</span> );
<span style="color:#069;font-weight:700">for</span>( <span style="color:#ff5600">var</span> i<span style="color:#069;font-weight:700">=</span><span style="color:#a8017e">0</span>; i<span style="color:#069;font-weight:700">&lt;</span>_list.<span style="color:#b7734c">length</span>; i<span style="color:#069;font-weight:700">++</span> )
{
	_myContents.<span style="color:#45ae34;font-weight:700">push</span>( _list[i] );
}
<span style="color:#af82d4">// 슬라이더 객체 생성</span>
<span style="color:#ff5600">var</span> _sliderStage    <span style="color:#069;font-weight:700">=</span> <span style="color:#a535ae">document</span>.<span style="color:#45ae34;font-weight:700">getElementById</span>( <span style="color:#666">"NSViewSliderStage"</span> );
_nxSlider   <span style="color:#069;font-weight:700">=</span> <span style="color:#069;font-weight:700">new</span> <span style="color:#21439c">STGestureSlider</span>( _sliderStage );
_nxSlider.onTweenComplete <span style="color:#069;font-weight:700">=</span> onSliderTweenComplete;
_nxSlider.setSlides( _myContents );
updatePages();
</pre><br>
<h4>Swipe the slider view!</h4>
<hr>
<div style="width:100%;text-align:center">
    <div id="NSViewSliderStage">
  </div>
</div>
<div id="controllBox">
<input type="button" value="<<" onClick="onClickPop(event)"/>
<span id="pages">0/10</span>
<input type="button" value=">>" onClick="onClickPush(event)"/>
page index:<input type="text" value="1" id="txt_index" ><input type="button" value="go page" onClick="onClickIndex(event)"/>
</div>
<hr>
<div class="desc">
<p>
<span class="title">[Propoerties]</span><br>
  currentPage() : 현재 페이지
  <br>
  totalPages() : 전체 페이지
</p>
<p>
<span class="title">[Method]</span><br>
<span class="MethodSpan">function</span> setSlides( pageList ) : View 영역에 보여질 컨텐츠 리스트<br>
<span class="MethodSpan">function</span> prev() : 이전 슬라이드<br>
<span class="MethodSpan">function</span> next() : 다음 슬라이드<br>
<span class="MethodSpan">function</span> setPageIndex( pageIndex ) : 페이지이동 (단,pageIndex 는 0 이상의 정수 )<br>
</p>
<p>
<span class="title">[Call Back Function]</span><br>
onTweenComplete : 슬라이드 모션 효과가 종료되었을때 호출
</p>
<span class="title">[CSS]</span><br>
<span class="CSSLabel">.page</span> : Content Cotainer<br/>
<span class="CSSLabel">.board</span> : Page (2ea) Container </div>

<div style="visibility:hidden; height:0px; overflow:hidden">
    <div class="myContent">Content 1<input type="button" value="Button1" onClick="sampleClick(event)"></div>
    <div class="myContent">Content 2</div>
    <div class="myContent">Content 3</div>
    <div class="myContent">Content 4</div>
    <div class="myContent">Content 5</div>
    <div class="myContent">Content 6<input type="button" value="Button2" onClick="sampleClick(event)"></div>
    <div class="myContent">Content 7</div>
    <div class="myContent">Content 8</div>
    <div class="myContent">Content 9<input type="button" value="Button3" onClick="sampleClick(event)"></div>
    <div class="myContent">Content 10</div>
</div>
</body>
</html>
